<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../jquery-2.0.0.min.js"></script>
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .box {
            width: 600px;
            height: 600px;
            background-color: #fff;
            margin: 100px auto;
            position: relative;
            border: 1px solid red;
        }

        .ball {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: lime;
            position: absolute;
            top: 0px;
            left: 0px;
        }

        .dangban {
            width: 100px;
            height: 20px;
            border-radius: 50px;
            background-color: blue;
            position: absolute;
            bottom: 0px;
            left: 50%;
            transform: translate(-50%, 0);
        }
    </style>
</head>

<body>
    <div class="box" id="box">
        <div class="ball" id="ball"></div>
        <div class="dangban" id="dangban"></div>
    </div>
    <script>
        let box = document.getElementById("box");
        let ball = document.getElementById("ball");
        let dangban = document.getElementById("dangban");
        let speedx = parseInt(Math.random() * 4 + 5);
        let speedy = parseInt(Math.random() * 4 + 5);

        setInterval(function () {
            ball.style.left = ball.offsetLeft + speedx + "px";
            ball.style.top = ball.offsetTop + speedy + "px";
            if (ball.offsetLeft >= 580 || ball.offsetLeft <= 0) {
                speedx *= -1;
            }
            if (ball.offsetTop >= 580 || ball.offsetTop <= 0) {
                speedy *= -1;
            }
            if (konck(dangban)) {
                speedx *= -1;
            }
        }, 30)


        dangban.onmousedown = function (e) {
            let OffSetX = e.clientX - dangban.offsetLeft;
            document.onmousemove = function (e) {
                dangban.style.left = e.clientX - OffSetX + "px";
                if (dangban.offsetLeft <= 50) {
                    dangban.style.left = "50px"
                } else if (dangban.offsetLeft > 500) {
                    dangban.style.left = "550px"
                }
                console.log(dangban.style.left)
            }
        }
        document.onmouseup = function () {
            document.onmousemove = null;
        }
    </script>
</body>

</html>